* {
  /* 初始化 取消页面元素的内外边框 */
  margin: 0;
  padding: 0;
}

.container {
  /* 弹性布局 水平 垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 让子元素垂直排列 */
  flex-direction: column;
  /* 100%窗口高度 宽度 */
  width: 100vw;
  height: 100vh;
  /* 背景径向渐变 */
  background: radial-gradient(circle at center, #555, #000);
}

.container a {
  /* 相对定位 */
  position: relative;
  /* 将a标签转为块级元素,不然无法设置宽高 */
  display: block;
  width: 140px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin: 40px;
  color: plum;
  text-decoration: none;
  font-size: 20px;
  /* 这里加一个动画过渡
    最后的0.3秒时延迟时间 */
  transition: all 0.3s ease-in-out 0.3s;
  /* 我们是如果改变a标签的颜色 */
  /* hue-rotate是颜色滤镜.可以加不同的度数来改变颜色.这里我们用的是calc自动计算函数 */
  /* 以及var函数来调用我们给每一个a元素设置的不同的自定义属性1~5，然后分别乘以60度，就能够分别得到不同的颜色 */
  filter: hue-rotate(calc(var(--i) * 60deg));
}

/* 这里将两个伪元素的相同样式写在一起 */
.container a::before,
.container a::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid plum;
  /* 这里加一个动画过渡
    最后的0.3秒时延迟时间 */
  transition: all 0.3s ease-in-out 0.3s;
}

.container a::before {
  top: 0;
  left: 0;
  /* 删除左边元素的右边框和下边框 */
  border-right: 0;
  border-bottom: 0;
}

.container a::after {
  right: 0;
  bottom: 0;
  /* 删除右边元素的左边框和上边框 */
  border-left: 0;
  border-top: 0;
}

.container a:hover {
  background-color: plum;
  color: #000;
  box-shadow: 0 0 50px plum;
  /* below下倒影 1px是倒影和元素相隔的距离,最后是个渐变色 */
  -webkit-box-reflect: below 1px
    linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  /* 这里以上属性设置一下延迟时间 */
  transition-delay: 0.4s;
}

.container a:hover::before,
.container a:hover::after {
  width: 138px;
  height: 58px;
  /* 这里不需要延迟 */
  transition-delay: 0;
}
